<template>
<!--
  详情页中，展示为解决的问题
    1.当页面加载完毕后，单击标题栏中的评论不会出现被选中，需要再次单击，
    2.标题栏中的字符显示不正确，
-->
  <div id="Detail">
    <!--  详情页头部  -->
    <NavBar>
      <template v-slot:left>
        <div @click="backHome">&lang;</div>
      </template>
      <template v-slot:center>
        <ul class="detail_menu">
          <li v-for="(item,index) of titles"
              :class="{'mySelect':mySelect===index}"
              @click="alertSelect(index)" :key="item">
            {{item}}
          </li>
        </ul>
      </template>
    </NavBar>

<!--  轮播图  -->
   <LunBo2 :lunbo-list="lunboList"></LunBo2>

<!--  商品介绍模块  -->
    <div class="commodityInfo">
    <!--   商品标题   -->
      <div class="commodity_title">
        {{Goods.title}}
      </div>
    <!--  商品价格详情   -->
      <detail-base-price
        :real-price="Goods.realPrice"
        :old-price="Goods.oldPrice"
        :discount="Goods.discount"/>

      <!--   商品简略信息   -->
      <detail-base-mess
      :columns="Goods.columns"/>

      <!--  商家提供的服务信息  -->
      <detail-base-serve :serivces="Goods.serivces"/>
    </div>

    <!--  店铺信息  -->
    <DetailBaseShop :shop-info="Shop"></DetailBaseShop>

    <!--  商品的详细信息  -->
    <detail-goods-info ref="goodsInfo"  :infos="detailInfo"></detail-goods-info>

    <!--  商品参数  -->
    <detail-param-info ref="detailGoods" :param-info="paramInfo"></detail-param-info>

    <!--  评论  -->
    <detail-comment ref="comment" :comment-infos="comment"></detail-comment>

    <!--  推荐信息  -->
    <commodity-list  :commoditys="recommendList"  ></commodity-list>

    <!--  底部工具栏  -->
    <detail-bottom-bar :good-info="Goods"></detail-bottom-bar>

  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar";
import {getDetail,Goods,Shop,GoodsParam,getRecommend} from "@/network/detail";
import LunBo2 from "@/components/common/lunbo/LunBo2";
import DetailBasePrice from "@/views/detail/childComps/DetailBasePrice";
import DetailBaseMess from "@/views/detail/childComps/DetailBaseMess";
import DetailBaseShop from "@/views/detail/childComps/DetailBaseShop";
import DetailBaseServe from "@/views/detail/childComps/DetailBaseServe";
import DetailGoodsInfo from "@/views/detail/childComps/DetailGoodsInfo";
import DetailParamInfo from "@/views/detail/childComps/DetailParamInfo";
import DetailComment from "@/views/detail/childComps/DetailComment";
import CommodityList from "@/components/common/commodityList/commodityList";
import DetailBottomBar from "@/views/detail/childComps/DetailBottomBar";
// import Toast from "@/components/common/toast/Toast";

export default {
  name: "Detail",
  components: {
    // Toast,
    DetailBottomBar,
    CommodityList,
    DetailComment,
    DetailParamInfo,
    DetailGoodsInfo,
    DetailBaseServe,
    DetailBaseShop,
    DetailBaseMess,
    DetailBasePrice,
    LunBo2, NavBar
  },
  data(){
    return{
      iid:"",
      mySelect:0,
      titles:['商品','细节','参数','评论'],
      lunboList:[],
      Goods:{},
      Shop:{},
      detailInfo:{},
      paramInfo:{},
      comment:{},
      recommendList:[],
      themeTopYs:[],//用于监听每个模块的top值，
      // message:'',
      // show:false,
    }
  },
  created() {
    this.iid=this.$route.params.iid;
    getDetail(this.iid)
    .then((value)=>{
      console.log(value);
      const data=value.result
      this.lunboList=data.itemInfo.topImages;

      this.Goods=new Goods(value.iid,this.lunboList[0],data.itemInfo,data.columns,data.shopInfo.services);//创建商品基本信息对象
      this.Shop=new Shop(data.shopInfo);//创建商家信息对象
      this.detailInfo=data.detailInfo.detailImage;//获取商品的详细信息

      this.paramInfo=new GoodsParam(data.itemParams.info,data.itemParams.rule);//获取商品参数

      this.comment=data.rate;//获取用户评论信息

    },(reason)=>{
      console.log(reason);
    });

    //获取推荐信息列表
    getRecommend()
    .then((value)=>{
      this.recommendList=value.data.list;
    },(reason)=>{
      console.log(reason);
    })

    //更改状态，不使用tabbar组件
    this.$store.commit('alertMyTage',false);



  },
  methods:{
    alertSelect(index){
      this.mySelect=index;
      this.detailScroll(index);
      console.log(this.mySelect)

    },
    backHome(){
      this.$router.go(-1);
    },
    detailScroll(index){
      window.scroll(0,this.themeTopYs[index]);
    },
  },
  mounted() {
    /**
     * 点击标题，滚动到对应的主题的注意事项
     * 1.在detail中监听标题的单击事件，获取index值
     * 2.滚动到对应的主题
     *  获取所有主题的 offsetTop
     *  问题：在哪里才能获取到正确的offsetTop值呢？？？
     *    1.created肯定不行，压根不能获取元素
     *    2.mounted也不行，数据还没有获取到，offsetTop不准确
     *    3.获取到数据的回调中也不行，DOM还没有完全被渲染完毕
     *    4.$nextTick 也不行，因为图片的高度没有被计算在类
     *    5.在图片加载完成后，获取的高度才是正确的，所以，我在单击标题时，获取offsetTop的值
     */
    //当我们放在这里时，发现有些数据时 undefined 这是因为虽然DOM节点已经加载完毕
    //但是，图片和数据未必能加载完毕，所以会出现 undefined 。这是我们就要去updated中加入
    //第一次获取，值不对
    this.$nextTick(()=>{
      //第二次获取
      //但是我们发现，获取过来的offsetTop值根本不对，这是因为对应的DOM是已经渲染出来了
      //但是图片依然是没有加载完（目前获取到的offsetTop不包含其中的图片）
      // offsetTop值不对的时候，都是因为图片没有全部加载完毕
      this.themeTopYs=[];//先让数组为空，在赋值
      this.themeTopYs.push(0);
      this.themeTopYs.push(this.$refs.goodsInfo.$el.offsetTop);
      this.themeTopYs.push(this.$refs.detailGoods.$el.offsetTop);
      this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
      console.log(this.themeTopYs);
    })

    //添加监听滚动事件
    window.onscroll= ()=>{
        // this.themeTopYs=[];//先让数组为空，在赋值
        // this.themeTopYs.push(0);
        // this.themeTopYs.push(this.$refs.goodsInfo.$el.offsetTop);
        // this.themeTopYs.push(this.$refs.detailGoods.$el.offsetTop);
        // this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
        // console.log(this.themeTopYs);

      // console.log(window.pageYOffset)
      this.themeTopYs=[];//先让数组为空，在赋值
      this.themeTopYs.push(0);
      this.themeTopYs.push(this.$refs.goodsInfo.$el.offsetTop);
      this.themeTopYs.push(this.$refs.detailGoods.$el.offsetTop);
      this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
      if (window.pageYOffset<=this.themeTopYs[0]+50){
        this.mySelect=0;
      }
      else if (window.pageYOffset>=this.themeTopYs[0] && window.pageYOffset<=this.themeTopYs[1]){
        this.mySelect=1;
      }
      else if (window.pageYOffset>=this.themeTopYs[1] && window.pageYOffset<=this.themeTopYs[2]){
        this.mySelect=2;
      }else if (window.pageYOffset>=this.themeTopYs[2] && window.pageYOffset<=this.themeTopYs[3]){
        this.mySelect=3;
      }else {
        this.mySelect=3;
      }
    }


  },
  computed:{
  },
  beforeUnmount() {
    window.onscroll=null;
  }
}
</script>

<style scoped>
#Detail{
  position: relative;
  z-index: 1;
  background-color: #EEEEEE;
  display: flex;
  flex-direction: column;
  margin-bottom: 50px;
  overflow: hidden;
}
.detail_menu{
  display: flex;
  text-align: center;
}
.detail_menu li{
  flex: 1;
  color: #555555;
  font-family: '宋体';
}

#Detail .mySelect{
  color: #FFFFFF;
  border-bottom: 2px solid var(--color-high-text);
}
.commodityInfo{
  width: 100%;
  height: 300px;
  padding: 15px 10px;
  background-color: #FFFFFF;
}
.commodity_title{
  font-size: 21px;
}
</style>
